<template>
  <el-dialog
    class="error_dialog"
    modal-class="error_dialog_model"
    :show-close="false"
    v-model="userStore.showerrordialog"
    width="500"
  >
    <template #header="{ close, titleId, titleClass }">
      <div class="error_dialog_header">
        <div style="cursor: pointer" @click="userStore.showerrordialog = false" >
          <img style="width: 18px; height: 18px; margin: 30px 3px 0 0" :src="del" />
        </div>
      </div>
    </template>
    <div class="error_dialog_body">
      <div class="error_dialog_body_text">服务器正在升级中...</div>
      <div>
        <el-button type="primary" @click="userStore.showerrordialog = false" class="error_dialog_body_button">确定</el-button>
      </div>
    </div>
  </el-dialog>
</template> 

<script setup>
import { useUserStore } from '@/stores/user'
import del from '@/assets/updata/del-default.png'
const userStore = useUserStore()
</script>

<style lang="scss" scoped>
.error_dialog_header {
  background-image: url('@/assets/updata/update_error.png');
  background-size: contain;
  background-repeat: no-repeat;
  width: 500px;
  height: 252px;
  
  background-color: transparent;
  display: flex;
  justify-content: flex-end;
}

.error_dialog_body {
  width: 100%;
  height: 184px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  border-radius: 0 0 8px 8px;
}
.error_dialog_body_text{
  font-size: 16px;
  font-weight: 700;
  
  color: rgba(0, 0, 0, 0.88);
}

.error_dialog_body_button{
  width: 112px;
  height: 40px;
}
</style>

<style>
.error_dialog {
  padding: 0;
  background-color: transparent;
  box-shadow: none;
  font-family: PingFangSC;
}
.error_dialog .el-dialog__header {
  padding-bottom: 0;
}
.error_dialog_model {
  /* background-color: rgba(37, 42, 48, 0.7); */
}
</style>